<template>
	<view class="video-play">
		<view v-if="info && info.url" class="top">
			<video :src="info.url"></video>
			<view class="bottom"></view>
		</view>
		<view v-if="info && info.url" class="section">
			<view class="title">{{info.tile}}</view>
			<view class="desc">
				<text>{{timestampToTime(info.createTime)}}</text>
				<text>{{info.playCount}}次播放</text>
			</view>
			<view v-if="userInfo.userProfileDO" class="info-box">
				<image :src="userInfo.userProfileDO.avatar"></image>
				<view class="right">
					<view>
						<view class="name">{{userInfo.userProfileDO.realName}}</view>
						<view class="company">
							<view>{{userInfo.companyProfileDO.companyName}}</view>
							<view>{{userInfo.userProfileDO.phoneNumber}}</view>
						</view>
					</view>
					<view class="btn" @tap="look">查看名片</view>
				</view>
			</view>
			<view v-if="list.length" class="recomm-box">
				<view class="title">推荐</view>
				<view class="list-box">
					<view class="list-item" v-for="item in list" :key="item.id">
						<view class="left">
							<video :src="item.url" mode=""></video>
						</view>
						<view class="right" @tap="lookVideo(item)">
							<view class="name">{{item.tile}}</view>
							<view class="desc">{{item.playCount}}次播放 · {{timestampToTime(item.createTime)}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="!(info && info.url)" class="nodata">
			<image src="../../static/images/nodata.png" mode="widthFix"></image>
		</view>
		<loginModal ref="loginModal" @success="success"/>
	</view>
</template>

<script>
import http from '@/utils/http.js'
import loginModal from '@/components/login/index.vue'
export default {
	components: { loginModal },
	data() {
		return {
		  token: '',
		  params: {
			id: ''
		  },
		  info: {},
		  userInfo: {},
		  loading: false,
		  userId: '',
		  list: []
		}
	},
	onLoad(options) {
		if (options.encrypted) {
			getApp().globalData.encryptedData = options.encrypted
		}
		this.params.id = options.id
		this.userId = options.userId		
		// this.token = uni.getStorageSync('token')
		// if (this.token) {
		// 	this.getData()
		// 	this.getUserData()
		// 	this.getRecomm()	
		// 	this.saveShare()
		// } else {
		// 	uni.showModal({
		// 		title: '提示',
		// 		content: '您还未登录，去登录？',
		// 		success:  (res) => {
		// 			if (res.confirm) {
		// 				this.login()
		// 			}
		// 		}
		// 	});
		// }
		this.getData()
		this.getUserData()
		this.getRecomm()	
		this.saveShare()
	},
	methods: {
		lookVideo(item) {
			uni.navigateTo({
				url: `/pagesA/share/video?id=${item.id}&userId=${item.userId}&encrypted=${this.userInfo.userProfileDO.level}`
			})
		},
		success() {
			this.token = uni.getStorageSync('token')
			if (this.token) {
				this.getData()
				this.getUserData()
				this.getRecomm()
				this.saveShare()
			}
		},
		login() {
			this.$refs.loginModal.open()
		},
		timestampToTime(timestamp) {
			if (!timestamp) return '';
			let date = new Date(timestamp);
			let year = date.getFullYear();
			let month = ("0" + (date.getMonth() + 1)).slice(-2);
			let day = ("0" + date.getDate()).slice(-2);
			let hour = ("0" + date.getHours()).slice(-2);
			let minute = ("0" + date.getMinutes()).slice(-2);
			let second = ("0" + date.getSeconds()).slice(-2);
			let formattedTime = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
			return formattedTime;
		},
		look() {
			uni.navigateTo({
				// url: `/pagesA/share/card?id=${this.userId}`				
				url: `/pagesA/share/card?id=${this.userId}&encrypted=${this.userInfo.userProfileDO.level}`, // 分享的路径
			})
		},
		getData() {
			this.loading = true;
			http({
				url: 'card/visitor/video/get',
				data: {
					...this.params
				}
			}).then(res => {
				this.loading = false;
				if(res.code === 0) {					
					this.info = res.data
				}
			})		
		},
		getUserData() {
			this.loading = true;
			http({
				url: 'card/user-profile/getById',
				data: {
					id: this.userId
				}
			}).then(res => {
				this.loading = false;
				if(res.code === 0) {				
					this.userInfo = res.data
				}
			})		
		},
		getRecomm() {
			http({
				url: 'card/visitor/video/page',
				data: {
					pageSize: 4,
					pageNo: 1,
					userId: this.userId
				}
			}).then(res => {
				if(res.code === 0) {
					// this.list = res.data.list.filter(v => (v.id !== (this.params.id - 0))).slice(0, 3)
					this.list = res.data.list.filter(v => (v.id !== (this.params.id - 0)))
				}
			})		
		},
		saveShare() {
			if (this.userId) {
				http({
					url: 'card/user-profile/like/update',
					method: 'put',
					data: {
						userId: this.userId,
						type: 3
					}
				})
			}
		}
	},
	// onShareAppMessage() {		    
	// 	return {
	// 	  title: '分享视频',
	// 	  path: '/pageA/share/card?id=123',
	// 	  imageUrl: '' 
	// 	}
	// },
	// onShareTimeline() {
	// 	return {
	// 	  title: '自定义转发标题',
	// 	  query: 'id=123',
	// 	  imageUrl: '' 
	// 	}
	// },
}
</script>

<style lang="scss" scoped>
.video-play {
	font-family: PingFang SC;
	.nodata {
		text-align: center;
		padding-top: 300rpx;
		image {
			width: 50%;
		}
	}
	.top {
		height: 455rpx;
		background: #BBBBBB;
		position: relative;
		video {
			width: 100%;
			height: 400rpx;
		}
		.bottom {
			width: 100%;
			height: 38rpx;
			border-radius: 40rpx 40rpx 0 0;
			background-color: #FFFFFF;
			position: absolute;
			bottom: 0;
			left: 0;
		}
	}
	.section {
		padding: 0 40rpx 40rpx;
		background-color: #FFFFFF;
		.title {			
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;
		}
		.desc {
			font-weight: 500;
			font-size: 22rpx;
			color: #999999;
			text {
				margin-right: 42rpx;
			}
		}
		.info-box {
			margin: 32rpx 0 40rpx;
			height: 162rpx;
			border-top: 1rpx solid #EEEEEE;
			border-bottom: 1rpx solid #EEEEEE;
			box-sizing: border-box;
			display: flex;
			align-items: center;			
			image {
				width: 100rpx;
				height: 100rpx;
				background: #E3E3E3;
				border-radius: 50rpx;
			}
			.right {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex: 1;
				padding-left: 30rpx;
				.name {
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
				}
				.company {
					font-weight: 500;
					font-size: 22rpx;
					color: #666666;
					line-height: 36rpx;
				}
				.btn {
					width: 160rpx;
					height: 70rpx;
					line-height: 70rpx;
					text-align: center;
					background: #E6ECFF;
					border-radius: 35rpx;
					font-weight: 500;
					font-size: 26rpx;
					color: #4B73FF;
				}
			}
		}
		.recomm-box {
			.title {
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
				margin-bottom: 20rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
			}
			.list-box {
				.list-item {
					display: flex;
					margin-bottom: 30rpx;
					.left {
						width: 240rpx;
						height: 180rpx;
						border-radius: 20rpx;
						overflow: hidden;
						video {
							width: 240rpx;
							height: 180rpx;
							background: #E7E7E7;
							border-radius: 20rpx;
						}
					}
					.right {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						padding-left: 38rpx;
						.name {
							font-weight: 500;
							font-size: 26rpx;
							color: #333333;
							line-height: 50rpx;
						}
						.desc {
							font-weight: 500;
							font-size: 22rpx;
							color: #999999;
						}
					}
				}
			}
		}
	}
}
</style>